<template>
	<view class="filter-search-bar" @click="handleClick">
		<slot></slot>
		<view class="clear" @click.stop="handleClear">
			<text class="cuIcon-close">清空</text>
		</view>
	</view>
	
	<view class="modal" v-if="modalVisiable">
		<view class="cu-bar bg-white search">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input
					:enable-native="false"
					type="text"
					v-model="searchValue"
					placeholder="输入关键词搜索"
					confirm-type="search"
					@confirm="handleSearch"
					@blur="handleSearch"
					@input="inputChange"
				/>
			</view>
		</view>
		
		<view class="select-rows">
			<view
				class="select-item"
				v-for="(item, index) in formListData"
				:key="index"
				@click="handleSelect(item)"
			>
				{{ item.text }}
			</view>
			
			<view class="loadmore" @click="loadData">{{ loadStatus === 'nomore' ? '没有更多了' : '加载更多'}}</view>
		</view>
		
		<view class="back-bar" @click="handleCancel">取消</view>
	</view>
</template>

<script setup lang="ts">
import { Ref, ref, defineEmits } from 'vue';
import { ISelector } from '../interface/ISelector';
import { queryFormList } from '../api/mission';

const emit = defineEmits(["select"])

const modalVisiable: Ref<boolean> = ref(false)

const formListData: Ref<ISelector[]> = ref([] as ISelector[])
const searchValue: Ref<string> = ref("")
let searchable = false
let page = 1
const handleSearch = ():void => {
	if (!searchable) return
	searchable = false
	loadData("refresh")
}
const inputChange = ():void => {
	searchable = true
}

const handleClick = () => {
	modalVisiable.value = true
	loadData("refresh")
}
const handleCancel = () => {
	modalVisiable.value = false
}
const loadStatus: Ref<string> = ref("loadmore")

const handleSelect = (item: ISelector) => {
	emit("select", item)
	modalVisiable.value = false
}

const handleClear = () => {
	emit("select", {
		text: "点击筛选表单",
		value: null
	})
}

const loadData = (type = "default") => {
	if (type === "refresh") {
		formListData.value = []
		page = 1
		loadStatus.value = "loadmore"
	}
	if (loadStatus.value === 'nomore') {
		return console.log("nomore")
	}
	queryFormList({
		pageSize: 10,
		pageNum: page++,
		name: searchValue.value
	}).then(res => {
		// console.log("form", res)
		// res.rows.reverse()
		formListData.value.push(...Array.from(res.rows, (formInfo: any) => ({
			value: formInfo.id,
			text: `[${formInfo.createTime}] ${formInfo.name}`
		})))
		console.log("formdataList", formListData.value)
		loadStatus.value = res.rows.length === 10 ? 'loadmore': 'nomore'
	})
}



</script>

<style lang="stylus" scoped>
.filter-search-bar
	height: 88rpx
	display: flex
	align-items: center
	padding: 0 54rpx
	background-color #eee
	justify-content: space-between
	.clear
		background: #fff
		padding 4rpx 8rpx 4rpx 4rpx
		border-radius: 8rpx
.filter-search-bar:active
	background-color #e2e2e2
	
.modal
	width: 100vw
	height: 100vh
	background-color: #eee
	position: fixed
	top: 0
	left: 0
	.back-bar
		position: absolute
		bottom: 0
		height: 88rpx
		background-color #fff
		width: 100vw
		display: flex
		justify-content: center
		align-items: center
		
.select-rows
	height: 100%
	overflow-y: scroll
	padding-bottom: 188rpx
	.select-item
		padding: 28rpx 32rpx
		text-align: left
		border-bottom: 2rpx solid #eee
		background-color: #fff
		font-size: 30rpx
		white-space: break-spaces
	.select-item:active
		background-color: #eee
.loadmore
	padding: 28rpx 32rpx
	text-align: center
	border-bottom: 2rpx solid #eee
	background-color: #eee
	font-size: 30rpx
</style>